div.markdown {
  font-size: 1rem;
  word-spacing: 1px;

  ul {
    padding-left: var(--ifm-list-left-padding);
    & > li {
      list-style: disc;
    }
  }

  ul,
  ol {
    ul > li {
      list-style: circle;
    }
  }

  ol {
    margin-bottom: 1rem;
    padding-left: var(--ifm-list-left-padding);
    & > li {
      list-style: decimal;
    }
  }

  h1:first-child {
    --ifm-h1-font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  body & h2 {
    @apply mb-2;
    --ifm-h2-font-size: 2rem;
  }

  h3 {
    --ifm-h3-font-size: 1.5rem;
  }

  h4 {
    --ifm-h4-font-size: 1.3rem;
  }

  h5 {
    --ifm-h5-font-size: 1.2rem;
  }

  p {
    margin-bottom: 1rem;
  }

  a:not(.cy-button-width) {
    text-decoration: none;
    font-weight: var(--ifm-font-weight-semibold);
    color: var(--ifm-link-color);
    border-bottom: 1px dotted var(--ifm-link-color);

    &:hover {
      border-bottom: 1px solid var(--ifm-link-color);
      color: var(--ifm-link-hover-color);
    }

    html[data-theme='dark'] & {
      color: var(--ifm-color-indigo-200);
    }
  }

  a.cy-button-width {
    display: inline-block;
    margin-bottom: 1rem;

    &.border-indigo-500 {
      html[data-theme='dark'] & {
          color: var(--ifm-color-jade-100);
          border-color: var(--ifm-color-jade-100);
      }
    }

    &.border-indigo-500:hover {
      color: var(--ifm-color-indigo-600);

      &.bg-indigo-500 {
        color: white;
      }
    }

    &.text-white {
      html[data-theme='dark'] & {
        color: white;
        border-color: white;
      }
    }

    &.text-white:hover {
      color: white;
    }

    svg {
      display: inline;
      vertical-align: text-top;
    }
  }

  .alert {
    margin-bottom: 2rem;
  }

  .alert,
  & {
    // add border bottom to code tags that are in a link
    a:has(> code) {
      &,
      &:hover {
        border: 0.1rem solid rgba(0, 0, 0, 0.1);
        border-radius: var(--ifm-code-border-radius);
        background-color: var(--ifm-code-background);
        padding: 0 0.2rem 0.2rem;
      }
    }

    a > code {
      border: none;
      background: transparent;
      border-radius: 0;
      text-decoration: underline dotted 1px;
      text-underline-offset: 3px;
    }

    a:hover > code {
      text-decoration-style: solid;
    }
  }

  // ensure text links in admonitions have underline
  .alert a {
    border-bottom: 1px dotted var(--ifm-link-color);

    &:hover {
      border-bottom: 1px solid var(--ifm-link-color);
    }
  }

  h2 {
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    line-height: 2.25rem;

    // hide hash link borders in headers when hovered
    a {
      border-bottom: none;
      margin-bottom: 6px;
      &:hover {
        border-bottom: none;
      }
    }
  }

  /* lists w/ headers as bullets */
  ul li > h2,
  h3,
  h4 {
    border-bottom: none;
  }

  div[class^='language-'] {
    margin-top: 2px;
  }

  /* add dotted underline to links on tablet and smaller mobile devices */
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    a {
      border-bottom: 1px dotted var(--ifm-link-color);

      &:hover {
        border-bottom: 1px solid var(--ifm-link-color);
      }
    }
  }
  @media screen and (max-width: 1024px) and (orientation: portrait) {
    a {
      border-bottom: 1px dotted var(--ifm-link-color);

      &:hover {
        border-bottom: 1px solid var(--ifm-link-color);
      }
    }
  }

  .theme-admonition {
    h2 {
      font-size: 1.5rem;
      @apply mb-4 mt-2;
    }
  }

  .inlineTOC ul {
    padding-left: 0;
  }

  --ifm-alert-border-radius: 5px;
}

/* override the background in the toc on mobile */
[data-theme='light'] .theme-doc-toc-mobile {
  --ifm-menu-color-background-active: #0000000d;
}
[data-theme='dark'] .theme-doc-toc-mobile {
  --ifm-menu-color-background-active: #ffffff0d;
}
